<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18.5.1-组件的生命周期</title>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        /**
         * - 当组件的代码在服务端运行时，
         *    由于不会对组件进行真正的挂载操作，即不会把虚拟 DOM 渲染为真实 DOM 元素，
         *    所以组件的 beforeMount 与 mounted 这两个钩子函数不会执行
         * - 服务端渲染的是应用的快照，所以不存在数据变化后的重新渲染，
         *    因此，组件的 beforeUpdate 与 updated 这两个钩子函数也不会执行
         * - 在服务端渲染时，也不会发生组件被卸载的情况，
         *    所以组件的 beforeUnmount 与 unmounted 这两个钩子函数也不会执行
         * - 只有 beforeCreate 与 created 这两个钩子函数会在服务端执行
        */

        /**
         * 常见的问题代码
         * 如果在客户端运行这段代码，并不会产生任何问题；
         *  但如果在服务端运行，则会造成内存泄漏。
         *  因为 beforeUnmount 钩子函数不会在服务端运行，
         *  所以这个定时器将永远不会被清除
         * */ 
        export default {
            created() {
                this.timer = setInterval(() => {
                // 做一些事情
                }, 1000)
            },
            beforeUnmount() {
                // 清除定时器
                clearInterval(this.timer)
            }
        }

        /**
         * 两个解决方案
         * - 将创建定时器的代码移动到 mounted 钩子中，即只在客户端执行定时器
         * - 使用环境变量包裹这段代码，让其不在服务端运行
         *   -- 在通过webpack 或 Vite 等构建工具搭建的同构项目中，通常带有这种环境变量
         *   -- 例如，Vite 会在客户端代码中注入一个全局变量 import.meta.env.SSR，
        */

    </script>
</html>